<template>
  <div style="padding: 30px; width: 100%">
    <a-row>
      <a-col :span="1" style="line-height: 30px">
        <h3>表名：</h3>
      </a-col>
      <a-col :span="4">
        <a-input placeholder="请输入" v-model="tableName" />
      </a-col>
      <a-col :span="4">
        &emsp;<a-button type="primary" @click="addTable()"> 保存 </a-button
        >&emsp;&nbsp;
        <a-button @click="goLink('/yichan/Zidingyi')">取消</a-button>
      </a-col>
    </a-row>
    <a-row class="zdy">
      <a-col :span="3">
        <h3>可用组件</h3>
        <draggable
          :list="list1"
          :sort="false"
          :group="{ name: 'aa', pull: 'clone', put: false }"
          :clone="cloneDiv"
        >
          <a-col
            :span="23"
            class="type"
            v-for="element in list1"
            :key="element.id"
            >{{ element.name }}</a-col
          >
        </draggable>
      </a-col>
      <a-col :span="17">
        <h3>自定义表单</h3>
        <draggable class="list-group" :list="list2" group="aa" @change="log">
          <div
            class="list-group-item"
            v-for="(element, index) in list2"
            :key="index"
            @click="clickDiv(index)"
          >
            <zujian :typeData="element.type" :nameData="element.name" />
          </div>
        </draggable>
      </a-col>
      <a-col :span="3" style="margin-left: 10px">
        <h3>内容修改</h3>
        <a-col :span="6" style="line-height: 30px">名称：</a-col>
        <a-col :span="18"
          ><a-input placeholder="请输入" v-model="newName" @change="changeName"
        /></a-col>
        <a-col :span="6" style="margin-top: 10px">
          <a-button type="primary" @click="deleteRow()"> 删除组件 </a-button>
        </a-col>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import zujian from "./table.vue";
import draggable from "vuedraggable";
let idGlobal = 8;
export default {
  name: "custom-clone",
  display: "Custom Clone",
  order: 3,
  components: {
    draggable,
    zujian,
  },
  data() {
    return {
      list1: [
        { name: "输入框", id: 1, type: "input" },
        { name: "多行输入", id: 2, type: "text" },
        { name: "文件上传", id: 3, type: "file" },
        { name: "图片上传", id: 4, type: "img" },
        { name: "时间选择", id: 5, type: "time" },
        { name: "日期选择", id: 6, type: "date" },
      ],
      list2: [],
      tableName: "",
      newName: "",
      arrIndex: "",
      a: 0,
    };
  },
  methods: {
    goLink(e) {
      this.$router.push(e);
    },
    log: function (evt) {
      // window.console.log(evt);
    },
    addTable() {
      console.log(this.list2);
      var dataRow = [];
      var dataRowType = [];
      for (let i = 0; i < this.list2.length; i++) {
        dataRow.push(this.list2[i].name);
        dataRowType.push(this.list2[i].type);
      }
      var parmas = {
        dataRow: "" + dataRow + "",
        dataRowType: "" + dataRowType + "",
        tableName: this.tableName,
      };
      this.$axios
        .post("/government-platform-center/userDefinedTable", parmas, {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        })
        .then((res) => {
          if (res.data.msg == "success") {
            this.goLink("/yichan/Zidingyi");
          }
        });
    },
    changeName() {
      this.list2[this.arrIndex].name = this.newName;
    },
    deleteRow() {
      this.list2.splice(this.arrIndex, 1);
      this.newName = "";
    },
    clickDiv(index) {
      this.newName = this.list2[index].name;
      this.arrIndex = index;
    },
    cloneDiv({ id }) {
      this.a++;
      if (id == 1) {
        return {
          type: "input",
          name: "输入框：",
          id: this.a,
        };
      }
      if (id == 2) {
        return {
          type: "text",
          name: "文本框：",
          id: this.a,
        };
      }
      if (id == 3) {
        return {
          type: "file",
          name: "文件上传：",
          id: this.a,
        };
      }
      if (id == 4) {
        return {
          type: "img",
          name: "图片上传：",
          id: this.a,
        };
      }
      if (id == 5) {
        return {
          type: "time",
          name: "时间选择器：",
          id: this.a,
        };
      }
      if (id == 6) {
        return {
          type: "date",
          name: "日期选择器：",
          id: this.a,
        };
      }
    },
  },
};
</script>
<style scoped>
.zdy {
  width: 100%;
  box-sizing: border-box;
}

.type {
  border: 1px solid #00000080;
  height: 40px;
  padding-left: 10px;
  line-height: 40px;
  margin-bottom: 20px;
}

.list-group {
  width: 100%;
  height: 600px;
  border: 1px solid #00000080;
  box-sizing: border-box;
  padding: 20px;
  overflow-y: scroll;
}
</style>
